<template>
  <div class="body">
    <div class="header">
      <div class="title"> 划 水 出 行 ✈
        
      </div>

      <div class="info">
        <img src="../assets/头像.jpg" class="avatar">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link" style="color:aliceblue">
            {{ $store.state.user.name }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-button @click="logEditFormVisible" icon="el-icon-edit"
              style="width: 150px; border:0">修改密码</el-button><br>
            <el-button @click="loginOut" icon="el-icon-switch-button" style="width: 150px; border:0">退出登录</el-button>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="editFormVisible">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPassWord">
          <el-input type="password" v-model="ruleForm.oldPassWord" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="password" v-model="ruleForm.newPassWord" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  -->
    <div class="ccc">
      <div class="aside">
        <el-button class="btn" :class="{ active: $route.path === '/home/work' }" @click="toUser">
          <i class="el-icon-s-home"></i> 系统首页</el-button>
        
        <el-button class="btn" :class="{ active: $route.path === '/home/flight' }" @click="toFlight">
          <i class="el-icon-s-shop"></i> 飞机票信息</el-button>
        <el-button class="btn" :class="{ active: $route.path === '/home/order' }" @click="toOrder">
          <i class="el-icon-s-order"></i> 飞机票订单</el-button>
        <el-button class="btn" :class="{ active: isEmployeeActive }" @click="toEmp">
          <i class="el-icon-s-custom"></i> 管理员信息</el-button>
      </div>

      <div class="main">

        <router-view />

      </div>

    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

export default Vue.extend({
  name: 'HomeView',
  computed: {
    isEmployeeActive() {
      return ['/home/employee', '/home/employee/add'].includes(this.$route.path);
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.newPassWord) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      editFormVisible: false,
      ruleForm: {
        id:this.$store.state.user.id,
        oldPassWord:'',
        newPassWord: '',
        checkPass: '',
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    loginOut() {
      this.$confirm('是否确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          url: '/api/employee/logout',
          method: 'post',
          params: {
            token: this.$store.state.user.token
          },
          headers: {
            token:this.$store.state.user.token
          }
        }).then(() => {
          this.$message.success("退出登录成功")
          this.$store.dispatch('user/logout');
          this.$router.push('/login')
        })
        
      }).catch((err) => {
          console.log("已取消退出登录");
          
      })
    },
    logEditFormVisible() {
      this.editFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            url: '/api/employee/editPassword',
            method: 'put',
            data: this.ruleForm,
            headers: {
              token: this.$store.state.user.token
            }
          }).then(res => {
            if (res.data.code === 1) {
              this.$message.success("密码修改成功，请重新登录~")
                this.$store.dispatch('user/logout')
              this.$router.push('/login')
            }
            else {
              this.$message.error(res.data.msg)
            }
          })
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    toFlight() {
      if (this.$route.path !== '/home/flight') {
        this.$router.push('/home/flight');
      } else location.reload();
    },
    toCategory() {
      if (this.$route.path !== '/home/category') {
        this.$router.push('/home/category');
      } else location.reload();
    },
    toUser() {
      if (this.$route.path !== '/home/work') {
        this.$router.push('/home/work');
      } else location.reload();
    },
    toOrder() {
      if (this.$route.path !== '/home/order') {
        this.$router.push('/home/order');
      } else location.reload();
    },
    toEmp() {
      if (!['/home/employee', '/home/employee/add'].includes(this.$route.path)) {
        this.$router.push('/home/employee');
      } else {
        location.reload();
      }
    }
  }
});
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* 禁止页面滚动 */
}

.info {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  width: 20%;
  /* border: 1px solid black; */
  padding: 10px;
  box-sizing: border-box;
  margin-left: 15%;
  padding-left: 5%;
}

.avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  object-fit: cover;
}
.body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.header {
  width: 100%;
  height: 70px;
  background-color: #0066bc;
  display: flex;
}

.title {
  font-size: 25px;
  font-weight: bold;
  line-height: 70px;
  width: 70%;
  color: #eee;
  /* border: 1px solid green; */
  margin-left: 3%;
  text-align: left;
  border-radius: 5px;
}



.ccc {
  display: flex;
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  /* 禁止内容区域整体滚动 */
}

.aside {
  width: 10%;
  background-color: #000b17;
  /* border: 1px solid black; */
  padding-top: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  min-height: 400px;
  overflow-y: auto;
  /* 单独控制侧边栏滚动 */
}

.btn {
  width: 90%;
  height: 45px;
  border: 0px solid black;
  margin-top: 20px;
  margin-left: 5%;
  font-size: 18px;
  background-color: #000b17;
  cursor: pointer;
  user-select: none;
  /* border-radius: 10px; */
  color: #eee;
  transition: all 0.6s;
  padding: 0;
}

.btn:hover {
  background-color: #46a6ff;
  color: #1a1a1b;
  /* transform: scale(1.09); */
}

.btn.active {
  background-color: #46a6ff;
  color: #2c3e50;
  font-weight: bold;
}

.main {
  flex-grow: 1;
  overflow-y: auto;
  /* 主内容区域允许滚动 */
  background-color: #f3f5f6;
  padding: 10px;
  box-sizing: border-box;
  min-height: 400px;
}

.view {
  width: 96%;
  margin: 1% auto;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 10px;
  overflow: hidden;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>